<template>
  <a-modal
    title="审批意见"
    :visible="visible"
    @cancel="onClose"
    :centered="true"
    destroyOnClose
  >
    <a-textarea
      v-model:value="remarkValue"
      placeholder="请输入审批意见..."
      :auto-size="{ minRows: 6 }"
    />
    <a-row class="mt-10" v-if="fileShowList.length" :gutter="8" align="middle">
      <template v-for="(file, index) of fileShowList" :key="index">
        <a-col :span="20">
          <div class="no-wrap">
            <span style="margin-right: 4px"> {{ index + 1 }}. </span>
            <span class="text-primary">
              {{ file.name }}
            </span>
          </div>
        </a-col>
        <a-col :span="4" class="text-right">
          <a-button type="link" danger @click="removeFile(index)">
            <template #icon>
              <DeleteOutlined />
            </template>
          </a-button>
        </a-col>
      </template>
    </a-row>
    <div class="mt-10">
      <a-space>
        <a-upload
          v-model:file-list="imgList"
          :multiple="true"
          accept="image/*,.bmp,.tiff"
          :showUploadList="false"
          :action="$utils.fileAction"
          :headers="{ 'org-token': $store.getters.token }"
          :data="{ dir: 'org_contract_approval_image' }"
          @change="handleUploadChange"
        >
          <a-button>
            <template #icon>
              <PictureOutlined />
            </template>
          </a-button>
        </a-upload>
        <a-upload
          v-model:file-list="fileList"
          :multiple="true"
          accept=".doc,.docx,.pdf"
          :showUploadList="false"
          :action="$utils.fileAction"
          :headers="{ 'org-token': $store.getters.token }"
          :data="{ dir: 'org_contract_approval_file' }"
          @change="handleUploadChange"
        >
          <a-button>
            <template #icon>
              <PaperClipOutlined />
            </template>
          </a-button>
        </a-upload>
      </a-space>
    </div>

    <template #footer>
      <a-row type="flex" align="middle" justify="end">
        <a-button type="primary" danger @click="onSubmit(2)">审批拒绝</a-button>
        <a-button type="primary" @click="onSubmit(1)">审批通过</a-button>
      </a-row>
    </template>
  </a-modal>
</template>

<script>
import { message } from "ant-design-vue";
import { reactive, watch, toRefs } from "vue";
import {
  PictureOutlined,
  PaperClipOutlined,
  DeleteOutlined,
} from "@ant-design/icons-vue";
export default {
  name: "HandleApproval",
  components: { PictureOutlined, PaperClipOutlined, DeleteOutlined },
  props: {
    visible: {
      default: false,
      type: Boolean,
    },
  },
  setup(props, { emit }) {
    const state = reactive({
      remarkValue: "",
      fileShowList: [],
      imgList: [],
      fileList: [],
    });

    // 审批上传
    const handleUploadChange = (info) => {
      const { file } = info;
      if (file && file.response && file.status == "done") {
        if (file.response.code == 1000) {
          // 上传成功
          state.fileShowList.push({
            name: file.name,
            url: file.response.data.fileUrl,
          });
        } else {
          // 上传失败
          message.warning(`文件“${file.name}”上传失败！`);
        }
      }
    };
    const removeFile = (index) => {
      state.fileShowList.splice(index, 1);
    };

    // 关闭弹框
    const onClose = () => {
      emit("onClose");
    };

    const onSubmit = (status) => {
      // 说明：审批状态 1=通过 2=拒绝
      let params = {
        remark: state.remarkValue,
        remark_files: state.fileShowList,
      };
      emit("submit", params, status);
    };

    watch(
      () => props.visible,
      (val) => {
        if (!val) {
          //  关闭时清除modal内数据
          state.remarkValue = "";
          state.fileShowList = [];
          state.imgList = [];
          state.fileList = [];
        }
      }
    );

    return {
      ...toRefs(state),
      onClose,
      onSubmit,
      handleUploadChange,
      removeFile,
    };
  },
};
</script>

<style></style>
